<template>
	<view class="box">
		<!-- row1 -->
		<view class="" style="height: 370px;">
			<swiper style="width: 100%;height: 100%;" class="screen-swiper" :indicator-dots="true" :circular="true"
				:autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item"></image>
					<video :src="item" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
						v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
		</view>
		<!-- row2 -->
		<view class="" style="padding: 15px;background-color: white;">
			<view class="" style="display: flex; ">
				<view class="" style="width: 80%;height: 50px;padding-right: 20px;font-size: 15px;">
					{{ress.prodName}}
				</view>
				<view class="" style="width: 20%; height: 50px; border-left: 1px solid #f1f1f1;">
					<view @click="imagee" class="" style="text-align: center;padding-top: 10px;">

						<image v-if="images==false" style=" width: 30%;height: 20px;"
							src="../../static/images/icon/prod-col.png"></image>
						<image v-if="images==true" style=" width: 30%;height: 20px;"
							src="../../static/images/icon/prod-col-red.png"></image>
					</view>
					<view class="" style="text-align: center;font-size: 10px;">
						收藏
					</view>
				</view>
			</view>
			<view class="" style="color: #ccc;">
				{{ress.brief}}
			</view>
			<view class="" style="color: #eb2444;font-weight: bold;font-size: 20px;">
				￥{{ress.price}}.00
				<s style="margin-left: 20px;font-size: 12px;color: #ccc;">￥{{ress.oriPrice}}</s>

			</view>
		</view>
		<!-- row2 -->
		<!-- row3 -->
		<view @click="openSkuPopup(idss)" class=""
			style="padding: 15px;background: white;margin: 10px 0;display: flex;justify-content: space-between;">
			<view class="">
				<text style="color: #ccc;margin-right: 5px;">已选</text>
				<text style="color: #000; font-weight: bold;margin-left: 10px;">{{resJS}}{{resJS_1.current}}件</text>
			</view>
			<view class="">
				<text v-for="(item,index) in 3" :key="index"
					style="margin: 0 2px; display: inline-block; width: 3px;height: 3px;border-radius: 50%;background: #ccc;"></text>
			</view>
		</view>
		<!-- row3 -->
		<!-- row4 -->
		<view data-target="bottomModal" @tap="showModal" class=""
			style="display: flex;justify-content: space-between;background-color: white;padding: 15px;">
			<view class="" style="font-size: 16px;">
				评价<text style="color: #eb2444;font-size: 12px;">好评{{resPJ.positiveRating}}%</text>
			</view>
			<view class="">
				共0条 <image style=" vertical-align: middle; width:20px;height: 20px;"
					src="../../static/images/icon/more.png"></image>
			</view>

		</view>
		<!-- row4 -->
		<!-- row5 -->
		<view data-target="bottomModal" @tap="showModal" class=""
			style="padding: 12px;background: white;margin-top: 2px;margin-bottom: 10px;">
			<text
				style="display: inline-block;text-align: center;line-height: 30px;font-size: 12px; width: 60px;height: 30px;margin-right: 10px;background: #fdf0f0;">全部({{resPJ.number}})</text>
			<text
				style="display: inline-block;text-align: center;line-height: 30px;font-size: 12px; width: 60px;height: 30px;margin-right: 10px;background: #fdf0f0;">好评({{resPJ.positiveRating}})</text>
			<text
				style="display: inline-block;text-align: center;line-height: 30px;font-size: 12px; width: 60px;height: 30px;margin-right: 10px;background: #fdf0f0;">中评({{resPJ.secondaryNumber}})</text>
			<text
				style="display: inline-block;text-align: center;line-height: 30px;font-size: 12px; width: 60px;height: 30px;margin-right: 10px;background: #fdf0f0;">差评({{resPJ.negativeNumber}})</text>
			<text
				style="display: inline-block;text-align: center;line-height: 30px;font-size: 12px; width: 60px;height: 30px;margin-right: 10px;background: #fdf0f0;">有图({{resPJ.picNumber}})</text>

		</view>
		<!-- row5 -->

		<!--  模态框-->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action ">
						商品评价
						<text style="margin-left: 10px; font-size: 12px;color: #eb2444;">好评度0%</text>
					</view>
					<view class="action text-blue" @tap="hideModal" style="font-size: 30px;">×</view>
				</view>
				<view class="padding-xl">
					<!-- Modal 内容。 -->
					<view class="" style="display: flex;justify-content: space-around;">
						<view @click="handleQH(index)" v-for="(item,index) in list" :key="index"
							:class="index==Huch?'padding-xl_xx_1':'padding-xl_xx'">
							{{item}}(0)
						</view>
					</view>

					<view class="" style="padding: 30px;color: #ccc;">
						暂无内容
					</view>
					<!-- Modal 内容。 -->
				</view>

			</view>
		</view>
		<!-- 摸忒狂 -->
		<!-- row6 -->
		<view class="row6" style="width: 100%;">
			<view style="width: 100%;" class="" v-html="ress.content">

			</view>
		</view>
		<!-- row6 -->

		<!-- row7 -->
		<view class="row7" style="display: flex;z-index: 9999; position:fixed;bottom: 0;right: 0;left: 0;">
			<view @click="FanHui" class="" style="width: 15%;background:white;height: 50px;text-align: center;">
				<view class="">
					<image style="width:25px;height: 24px;margin-top: 5px;"
						src="../../static/images/tabbar/homepage.png" mode=""></image>
				</view>
				<view class="" style="font-size: 10px;color:#666;">
					首页
				</view>
			</view>
			<view class="" style="width: 15%;background:white;height: 50px;text-align: center;"  @click="gouWu">
				<view class="">
					<image style="width:25px;height: 24px;margin-top: 5px;" src="../../static/images/tabbar/basket.png"
						mode=""></image>
				</view>
				<view class="" style="font-size: 10px;color:#666;">
					购物车
				</view>
			</view>
			<view @click="openSkuPopup(idss)" class=""
				style="width: 35%;background:#584e61;height: 50px; line-height: 50px;text-align: center;color: white;">
				加入购物车
			</view>
			<view @click="openSkuPopup(idss)" class=""
				style="width: 35%;background:#eb2444;height: 50px; line-height: 50px;text-align: center;color: white;">
				立即购买
			</view>
		</view>
		<!-- row7 -->
		<view class="">
			<view class="app">


				<vk-data-goods-sku-popup @num-change="abc" ref="skuPopup" v-model="skuKey" border-radius="20"
					:z-index="999999" :localdata="goodsInfo" :mode="skuMode" @open="onOpenSkuPopup"
					@close="onCloseSkuPopup" @add-cart="addCart" @buy-now="buyNow"></vk-data-goods-sku-popup>
			</view>
		</view>

	</view>
</template>

<script>
	var http = require("../../utils/http");
	// import cc from "../../components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue";
	// import bb from "../../components/vk-data-input-number-box/vk-data-input-number-box.vue";

	export default {
		// components: {
		// 	cc,
		// 	bb
		// },
		data() {
			return {
				// 跳转传参
				// orderItem:{},
				// 跳转传参
				ShuLiang: 1,
				Imges: '',
				idss: '',
				List_CJ: [],
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsInfo: {},
				// 
				Huch: '0',
				modalName: null,
				images: true,
				swiperList: [],
				ress: {},
				resPJ: {},
				resJS: {},
				resJS_1: {},
				list: ["全部", "好评", "中评", "差评", "有图"]
				// lun
			}
		},
		onLoad(option) {
			console.log(option.prodid, "接收");
			// 调用接口传递参数
			this.lun(option.prodid)
			this.PingJia(option.prodid)
			this.JianShu(option.prodid)
			this.loge(option.prodid)
			this.ids = option.prodid
			// this.openSkuPopup()

		},
		methods: {
			// 购物车
			gouWu(){
				uni.switchTab({
					url:'/pages/basket/basket'
				})
			},
			// 切换接口
			QH_invoke() {

			},
			// 切换接口
			// 切换
			handleQH(i) {

				this.Huch = i
				var params = {
					url: "/prodComm/prodCommPageByProd",
					method: "GET",
					data: {
						prodId: 72,
						size: 10,
						current: 1,
						evaluate: i - 1,
					},
					callBack: res => {
						// console.log(res);
						// this.ress=res

					},
				}
				http.request(params)
			},
			// 切换
			// 模态框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			// 模态框
			// 爱心
			imagee() {
				this.images = !this.images
				var params = {
					url: "/p/user/collection/addOrCancel",
					method: "POST",
					data: this.ids,
					callBack: res => {
						// console.log(res);
						// this.ress=res

					},
				}
				http.request(params)
			},
			// 爱心
			// lun
			lun(id) {
				var params = {
					url: "/prod/prodInfo",
					method: "GET",
					data: {
						prodId: id,
					},
					callBack: res => {

						this.List_CJ = res.skuList
						this.Imges = res.pic

						// console.log(this.List_CJ, "接口接口接口接口接口接口接口接口接口接口");
						// console.log(this.List_CJ.length, "接口接口接口接口接口接口接口接口接口接口");
						console.log(this.Imges, "接口接口接口接口接口接口接口接口接口接口");

						this.idss = this.List_CJ.length
						// for (var i = 0; i < res.skuList.length; i++) {
						// 	console.log(this.List_CJ[i].skuName, "0000000000000000");
						// 	console.log(this.List_CJ[i].skuName.split(' ')[0], "0000000000000000");
						// 	console.log(this.List_CJ[i].skuName.split(' ')[1], "0000000000000000");
						// 	console.log(this.List_CJ[i].skuName.split(' ')[2], "0000000000000000");

						// }

						this.ress = res

						this.resJS = res.skuList[0].skuName
						if (this.resJS != "") {
							this.resJS = this.resJS + ","
						}
						// console.log(this.ress, "全局");
						// console.log(this.resJS, "已选");
						// this.swiperList = res
						// console.log(this.swiperList, "lun");
						// 语法：数组.split("符号")
						this.swiperList = res.imgs.split(",")
						// console.log(this.swiperList)
					},
				}
				http.request(params)
			},

			// lun
			// 件数
			JianShu(id) {
				var params = {
					url: "/prodComm/prodCommPageByProd",
					method: "GET",
					data: {
						prodId: id,
						size: 10,
						current: 1,
						evaluate: -1,
					},
					callBack: res => {

						this.resJS_1 = res


						// console.log(this.resJS_1, "剑术师");

					},
				}
				http.request(params)
			},

			// 件数
			// 评价接口
			PingJia(id) {
				var params = {
					url: "/prodComm/prodCommData",
					method: "GET",
					data: {
						prodId: id,
					},
					callBack: res => {
						// console.log(res);
						this.resPJ = res
						// console.log(this.resPJ, "评价接口");
						// this.swiperList = res
						// console.log(this.swiperList, "lun");
						// 语法：数组.split("符号")
						// this.swiperList = res.imgs.split(",")
						// console.log(this.swiperList)
					},
				}
				http.request(params)
			},
			// 评价接口
			// 判断登录接口
			loge(id) {
				http.request({
					url: "/p/user/collection/isCollection",
					method: "GET",
					data: {
						prodId: id,
					},
					callBack: res => {

					},
				})
			},
			// 判断登录接口
			// 返回首页
			FanHui() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 返回首页
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// 初始化
			init(options = {}) {},
			// 获取商品信息，并打开sku弹出
			openSkuPopup(i) {



				/**
				 * 获取商品信息
				 * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
				 */
				// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
				// goodsInfo是后端返回的数据
				// console.log(this.Imges, "555555555555555555555555555555555");
				// 数量1
				if (i == 1) {
					this.goodsInfo = {
						"_id": "001",
						"name": "iphone11",
						"goods_thumb": this.Imges,
						"sku_list": [
							// {
							// 	"_id": "001",
							// 	"goods_id": "001",
							// 	"goods_name": "iphone11",
							// 	"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
							// 	"price": 19800,
							// 	"sku_name_arr": ["公开版", "深空灰色", "512GB"],
							// 	"stock": 1000
							// },
							// {
							// 	"_id": "002",
							// 	"goods_id": "001",
							// 	"goods_name": "iphone11",
							// 	"image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
							// 	"price": 9800,
							// 	"sku_name_arr": ["原厂延保版", "深空灰色", "64GB"],
							// 	"stock": 100
							// },



						],
						"spec_list": [{
								"name": "请勾选",
								"list": [{
										"name": "1件"
									},

								]
							},

						],

					};
					this.skuKey = true;
				} else if (i == 21) {
					this.goodsInfo = {
						"_id": "001",
						"name": "iphone11",
						"goods_thumb": this.Imges,
						"sku_list": [
							// {
							// 	"_id": "001",
							// 	"goods_id": "001",
							// 	"goods_name": "iphone11",
							// 	"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
							// 	"price": 19800,
							// 	"sku_name_arr": ["公开版", "深空灰色", "512GB"],
							// 	"stock": 1000
							// },
							// {
							// 	"_id": "002",
							// 	"goods_id": "001",
							// 	"goods_name": "iphone11",
							// 	"image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
							// 	"price": 9800,
							// 	"sku_name_arr": ["原厂延保版", "深空灰色", "64GB"],
							// 	"stock": 100
							// },
							// {
							// 	"_id": "003",
							// 	"goods_id": "001",
							// 	"goods_name": "iphone11",
							// 	"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
							// 	"price": 19800,
							// 	"sku_name_arr": ["原厂延保版", "银色", "64GB"],
							// 	"stock": 1
							// }


						],

						"spec_list": [{
								"name": "版本",
								"list": [{
										"name": "换修无忧版"
									},
									{
										"name": "原厂延保版"
									},
									{
										"name": "公开版"
									}
								]
							},
							{
								"name": "颜色",
								"list": [{
										"name": "深空灰色"
									},
									{
										"name": "银色"
									}
								],
							},
							{
								"name": "内存",
								"list": [{
										"name": "64GB"
									},
									{
										"name": "256GB"
									},
									{
										"name": "512GB"
									}
								]
							},

						]
					};
					this.skuKey = true;
				} else if (i == 34) {
					this.goodsInfo = {
						"_id": "001",
						"name": "iphone11",
						"goods_thumb": this.Imges,
						"sku_list": [


						],

						"spec_list": [{
								"name": "尺寸",
								"list": [{
										"name": "40*50"
									},
									{
										"name": "50*60"
									},
									{
										"name": "60*80"
									}
								]
							},
							{
								"name": "外框类型",
								"list": [{
										"name": "曜石黑金属画框"
									},
									{
										"name": "流砂金属画框"
									},
									{
										"name": "轻奢金画框"
									}
								],
							},
							{
								"name": "颜色分类",
								"list": [{
										"name": "金色"
									},
									{
										"name": "粉红色"
									},
									{
										"name": "银色"
									},
									{
										"name": "暗黑色"
									}
								]
							},

						]
					};
					this.skuKey = true;
				} else if (i == 2) {
					this.goodsInfo = {
						"_id": "001",
						"name": "iphone11",
						"goods_thumb": this.Imges,
						"sku_list": [


						],

						"spec_list": [{
								"name": "颜色",
								"list": [{
										"name": "心水金"
									},
									{
										"name": "真爱粉"
									},

								]
							},
							{
								"name": "尺寸",
								"list": [{
										"name": "3.6寸"
									},

								],
							},


						]
					};
					this.skuKey = true;
				} else {
					this.goodsInfo = {
						"_id": "001",
						"name": "iphone11",
						"goods_thumb": this.Imges,
						"sku_list": [


						],

						"spec_list": [{
								"name": "鞋码",
								"list": [{
										"name": "41"
									},
									{
										"name": "42"
									},
									{
										"name": "42.5"
									},
									{
										"name": "43"
									},
									{
										"name": "43.5"
									},

								]
							},
							{
								"name": "颜色分类",
								"list": [{
										"name": "原灰白/浅灰/蒸汽绿"
									},

								],
							},


						]
					};
					this.skuKey = true;
				}




				// console.log(this.List_CJ, "测试测试测试测试测试测试测试测试测试测试测试测试");
				for (var i = 0; i < this.List_CJ.length; i++) {

					this.goodsInfo.sku_list.push({


						"_id": `00${i+1}`,
						"goods_id": this.List_CJ[i].skuId,
						"goods_name": "0",
						"image": this.List_CJ[i].pic,
						"price": `${this.List_CJ[i].price}00`,

						"sku_name_arr": [this.List_CJ[i].skuName.split(' ')[0], this.List_CJ[i].skuName.split(' ')[
							1], this.List_CJ[i].skuName.split(' ')[2]],
						"stock": this.List_CJ[i].stocks,

					})
					// 分割
					if (this.List_CJ[i].skuName.length == 0) {
						var ll = ["1件"]
						this.goodsInfo.sku_list[i].sku_name_arr = ll
					} else {
						var ccc = this.List_CJ[i].skuName.split(' ');

						// console.log(ccc[0], '00000');
						this.goodsInfo.sku_list[i].sku_name_arr = ccc
					}


				}





				console.log(this.goodsInfo.sku_list, "成功成功成功成功成功成功成功成功成功成功成功成功");

			},
			// sku组件 开始-----------------------------------------------------------
			onOpenSkuPopup() {
				console.log("监听 - 打开sku组件");
			},
			onCloseSkuPopup() {
				console.log("监听 - 关闭sku组件");
			},
			// 加入购物车前的判断
			addCartFn(obj) {
				let {
					selectShop
				} = obj;
				// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
				let res = {};
				let name = selectShop.goods_name;
				if (selectShop.sku_name != "默认") {
					name += "-" + selectShop.sku_name_arr;
				}
				res.msg = `${name} 已添加到购物车`;
				if (typeof obj.success == "function") obj.success(res);
				console.log(this.name);
			},
			// 加入购物车按钮
			addCart(selectShop) {

				console.log("监听 - 加入购物车");
				console.log(this.ress, "fffffffffffffffffffffffffffffffffffffffffffffffff");
				console.log(selectShop, 'fffffffffffffffffffffffffffffffffffffffffffffffff');
				// 调用购物车接口

				http.request({
					url: "/p/shopCart/changeItem",
					method: "POST",
					data: {
						basketId: 0,
						count: this.ShuLiang,
						prodId: this.ress.prodId,
						shopId: this.ress.shopId,
						skuId: selectShop.goods_id,
					},
					callBack: res => {

					},
				})

				// 嵌套同步2
				http.request({
					url: "/p/shopCart/prodCount",
					method: "GET",
					data: {},
					callBack: res => {

						// 调用http内的函数，数量加+1
						http.getCartCount()

					},

				})
				// 同步2


				// 调用购物车接口
				this.addCartFn({
					selectShop: selectShop,
					success: res => {
						console.log(res);
						// 实际业务时,请替换自己的加入购物车逻辑
						this.toast(res.msg);
						setTimeout(() => {
							this.skuKey = false;
							console.log(this.skuKey);
						}, 300);
					}
				});
			},
			abc(val) {
				this.ShuLiang = val

			},
			// 立即购买
			buyNow(selectShop) {
				console.log("监听 - 立即购买");
				console.log(selectShop);
				
					const orderItem = {
						prodCount:this.ShuLiang,
						prodId:this.ress.prodId,
						shopId:this.ress.shopId,
						skuId:selectShop.goods_id,
					}
					
					// console.log(orderItem,"00000000000000000000000000000000000000000000");
					uni.setStorageSync('orderItem', orderItem);

				// 跳转
				uni.navigateTo({
					// 对象跳转传参
					url: `/pages/submit-order/submit-order?orderEntry=1`
				})
				
				// 跳转

				this.addCartFn({
					selectShop: selectShop,
					success: res => {
						// 实际业务时,请替换自己的立即购买逻辑
						console.log(res);
						this.toast("立即购买");
						console.log(this.ShuLiang, 'fffffferwrrrrrrr');

					}
				});
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				});
			}
			// 
		}
	}
</script>

<style lang="scss" scope>
	.box::v-deep {
		.app {
			padding: 30rpx;
			font-size: 28rpx;
		}

		width: 100%;

		.row6 {
			width: 100px !important;

		}

		.padding-xl {
			height: 100vh;
			padding: 10px;


			.padding-xl_xx_1 {
				margin-top: 10px;
				width: 16%;
				height: 25px;
				border-radius: 5px;
				line-height: 25px;
				color: white;
				font-size: 12px;
				background-color: #e93b3d;

			}

			.padding-xl_xx {
				margin-top: 10px;
				width: 16%;
				height: 25px;
				border-radius: 5px;
				line-height: 25px;
				color: #000;
				font-size: 12px;
				background-color: #fdf0f0;

			}
		}
	}
</style>